import React from 'react';
import {enterpriseComContractGetComContractById,uploadUrl} from "../../../services/api";
import PDrawer from '../../../components/Pro/PDrawer';
import PSelect from '../../../components/Pro/PSelect';
import {
  Form,
  Input,
  Button,
  DatePicker,
  Popover,
  Icon,
  Radio,
  Upload
} from 'antd';

import bcx_utils from '../../../common/bcx_utils';
import moment from 'moment';

const FormItem = Form.Item;
const RadioGroup = Radio.Group;

@Form.create()
export default class DrawRenew extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      dataSource: {
        contractType: '',//合同类型
        contractName: '',//合同名称
        comFileNo: '',//企业档案编号
        comParty: '',//我方为 1 甲方，2 乙方
        firstPartyName: "",//甲方名称
        firstPartyTel: "",//甲方联系电话
        secondPartyName: "",//乙方名称
        secondPartyTel: "",//乙方联系电话
        effectStartDate: bcx_utils.currentData(),//生效开始日期
        effectEndDate: bcx_utils.currentData(),//生效结束日期
        payAmount: "",//付费金额
        payDate: "",//付费日期
        agreementSignDate: "",//协议签订日期
        remark: "",//合同备注日期
      }
    }
  }

  /******************************生命周期******************************/

  componentDidMount = () => {

  }

  componentWillReceiveProps = (nextProps, newState) => {
    if (!this.props.visible && nextProps.visible && nextProps.comContractId) {
      this.ajaxContractDetail(nextProps.comContractId);
    }
  }

  /******************************ajax请求******************************/
    //获取订单详情
  ajaxContractDetail = (comContractId) => {
    enterpriseComContractGetComContractById({comContractId}).then(({data}) => {
      console.log("获取订单详情", data);
      if (!data) {
        return;
      }
      const dataSource = {...this.state.dataSource};
      this.setState({dataSource: {...dataSource, ...data}});
    }, (err) => {
      console.log(err);
    });

  }
  /******************************相关事件******************************/
  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log(values);

      }
    });
  }

  closeDrawer = () => {
    this.props.closeDrawer();
  }

  /******************************render******************************/

  render() {
    const {visible} = this.props;
    const {getFieldDecorator} = this.props.form;

    const {
      contractType,
      contractName,
      comFileNo,
      comParty,
      firstPartyName,
      firstPartyTel,
      secondPartyName,
      secondPartyTel,
      effectStartDate,
      effectEndDate,
      payAmount,
      payDate,
      agreementSignDate,
      remark,
    } = this.state.dataSource;

    const dateFormat = 'YYYY-MM-DD';
    return (
      <PDrawer
        title="续签合同"
        visible={visible}
        okText="确认"
        cancelText="返回"
        onCancel={this.closeDrawer}
        onOk={this.handleSubmit}
        destroyOnClose={true}
      >
        <div>
          <Form onSubmit={this.handleSubmit} style={{width: 390, margin: "6px 0 81px 0"}}>
            <FormItem
              {...formItemLayout1}
              label="合同类型"
              style={{marginTop: 24}}
            >
              {getFieldDecorator('contractType', {
                initialValue: contractType,

              })(
                <PSelect type="contractType" style={{width: 294}}/>
              )}
            </FormItem>
            <FormItem
              {...formItemLayout1}
              label="合同名称"
              style={{marginTop: 24}}
            >
              {getFieldDecorator('contractName', {
                initialValue: contractName,
              })(
                <Input style={{width: 294}}/>
              )}
            </FormItem>
            <FormItem
              {...formItemLayout1}
              label="企业档案编号"
              style={{marginTop: 24}}
            >
              {getFieldDecorator('comFileNo', {
                initialValue: comFileNo,
              })(
                <Input style={{width: 294}}/>
              )}
            </FormItem>
            <FormItem
              {...formItemLayout1}
              label="我方为"
              style={{marginTop: 24}}
            >
              {getFieldDecorator('comParty', {
                initialValue: comParty,
              })(
                <RadioGroup>
                  <Radio value="1">甲方</Radio>
                  <Radio value="2">乙方</Radio>
                </RadioGroup>
              )}
            </FormItem>
            <FormItem
              {...formItemLayout1}
              label="甲方"
              style={{marginTop: 24}}
            >
              {getFieldDecorator('firstPartyName', {
                initialValue: firstPartyName,
              })(
                <Input style={{width: 294}}/>
              )}
            </FormItem>
            <FormItem
              {...formItemLayout1}
              label="联系电话"
              style={{marginTop: 24}}
            >
              {getFieldDecorator('firstPartyTel', {
                initialValue: firstPartyTel,
              })(
                <Input style={{width: 294}}/>
              )}
            </FormItem>
            <FormItem
              {...formItemLayout1}
              label="乙方"
              style={{marginTop: 24}}
            >
              {getFieldDecorator('secondPartyName', {
                initialValue: secondPartyName,
              })(
                <Input style={{width: 294}}/>
              )}
            </FormItem>
            <FormItem
              {...formItemLayout1}
              label="联系电话"
              style={{marginTop: 24}}
            >
              {getFieldDecorator('secondPartyTel', {
                initialValue: secondPartyTel,
              })(
                <Input style={{width: 294}}/>
              )}
            </FormItem>
            <FormItem
              {...formItemLayout1}
              label="合同有效期"
              style={{marginTop: 24}}
            >
              {getFieldDecorator('secondPartyTel', {
                initialValue: [moment(effectStartDate.slice(0, 10), dateFormat),
                  moment(effectEndDate.slice(0, 10), dateFormat)],
              })(
                <DatePicker.RangePicker style={{width: 294}}/>
              )}
            </FormItem>
            <FormItem
              {...formItemLayout1}
              label="付费金额"
              style={{marginTop: 24}}
            >
              {getFieldDecorator('payAmount', {
                initialValue: payAmount
              })(
                <Input style={{width: 294}}/>
              )}
            </FormItem>
            <FormItem
              {...formItemLayout1}
              label="付费日期"
              style={{marginTop: 24}}
            >
              {getFieldDecorator('payDate', {
                initialValue: !!payDate
                  ? moment(payDate.slice(0, 10), dateFormat)
                  : undefined
              })(
                <DatePicker style={{width: 294}}/>
              )}
            </FormItem>
            <FormItem
              {...formItemLayout1}
              label="协议签订日期"
              style={{marginTop: 24}}
            >
              {getFieldDecorator('agreementSignDate', {
                initialValue: moment(agreementSignDate.slice(0, 10), dateFormat)
              })(
                <DatePicker style={{width: 294}}/>
              )}
            </FormItem>
            <FormItem
              {...formItemLayout1}
              label="合同备注信息"
              style={{marginTop: 24}}
            >
              {getFieldDecorator('remark', {
                initialValue: remark
              })(
                <Input.TextArea style={{width: 294}}/>
              )}
            </FormItem>
            <FormItem
              {...formItemLayout1}
              label="合同文件备份"
              style={{marginTop: 24}}
            >
              {getFieldDecorator('comName',)(
                <Upload name="xfile" action={uploadUrl} listType="picture">
                  <Button>
                    <Icon type="upload" /> 上传文件
                  </Button>
                </Upload>
              )}
            </FormItem>

          </Form>
        </div>
      </PDrawer>
    );
  }
}

const
  formItemLayout1 = {
    labelCol: {
      xs: {span: 24},
      sm: {span: 12},
    },
    wrapperCol: {
      xs: {span: 24},
      sm: {span: 12},
    },
  };
